import React, { Component } from 'react'

// 需要管理员权限才可以访问
class PageA extends Component{
  render(){
    return <h1>PageA</h1>
  }
};
class PageB extends Component{
  render(){
    return <h1>PageB</h1>
  }
};
function withVIPAuth(Cmp){
  return class extends Component{
    state= {
      // role:"Admin",
      role:""
    }
    componentDidMount(){
      setTimeout(()=>{
        this.setState({
          role:"Admin"
        })
      },3000)
    }
    render(){
      if(this.state.role === "VIP"){
        return <Cmp></Cmp>
      }else{
        return <div>没有权限查看该页面!</div>
      }
    }
  }
}
function withAdminAuth(Cmp){
  return class extends Component{
    state= {
      // role:"Admin",
      role:""
    }
    componentDidMount(){
      setTimeout(()=>{
        this.setState({
          role:"Admin"
        })
      },3000)
    }
    render(){
      if(this.state.role === "Admin"){
        return <Cmp></Cmp>
      }else{
        return <div>没有权限查看该页面!</div>
      }
    }
  }
}
class App extends Component {
  
  render() {
    let WithAdminPageA = withAdminAuth(PageA);
     {/* PageB VIP才能访问 */}
    let WithAdminPageB = withVIPAuth(PageB);
    return (
      <div>
    <div>
      <WithAdminPageA></WithAdminPageA>
     
      <WithAdminPageB></WithAdminPageB>
    </div>
      </div>
    );
  }
}

export default App;
